<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽奖</title>
    <style>
        .cj-box{ width: 600px; height: 600px; margin: 0 auto; position: relative; background: #102129;}
        .cj-img{background: url("images/circle.png") no-repeat center center;
            -webkit-background-size: 100%;
            background-size: 100%; width: 100%; height: 100%; }
        .cj-box img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
        .cj-box .point{width: 37%;height: 40%; position: absolute; top: 31%; bottom: 0; left: 0; right: 0;
            margin: 0 auto;}
        .cj-box .light2Img{display: block;-webkit-transform: rotate(0);}
        .cj-box .light2Img.m {-webkit-transform: rotate(15deg);}
        .cj-box .circleTrans {-webkit-transform: rotate(0deg); -webkit-transition: 2s}
    </style>
</head>
<body>
<!--<div class="cj-box">-->
<!--    <div class="cj-img" id="c-circle">-->
<!--        <img src="images/cj-img.png" class="circleTrans" alt="奖品转盘" />-->
<!--        <img src="images/light.png" class="light2Img lightColor" alt="光效" />-->
<!--    </div>-->
<!--    <img src="images/point.png" class="point" id="point" alt="立即抽奖">-->
<!--</div>-->
<div class="box_turntable"></div>

<script src="https://www.changyou.com/cdn/jquery/3.4.1/jquery.min.js"></script>
<script src="../2.0/turntable.js"></script>
<script>
    var wheelSurf = $('.box_turntable').WheelSurf({
        width: 300,
        height: 300
    });
    wheelSurf.init();

    // var num = 1;
    // var prize_arr = {
    //     "1": 206,   //谢谢参与
    //     "2": 51,    //50元话费卡
    //     "3": 255,   //100元话费卡
    //     "4": 100,   //100元京东卡
    //     "5": 152,   //小米随身音响
    //     "7": 305,   //华为Mate20Pro
    //     "8": 360    //IPhoneXsmax
    // };
    // $("#point").on('click', function () {
    //     var prizeCode = 1;
    //     var argle = num * 720 + prize_arr[prizeCode];
    //     $('#c-circle').css({
    //         WebkitTransform: 'rotate('+argle+'deg)',
    //         transition: '2s'
    //     });
    //     num ++;
    // });
</script>
</body>
</html>